import { Tooltip } from "@supcon/supcon-5t-design";
import { CSSProperties, FC, ReactElement, ReactNode, useContext } from "react";
// import { RiskAreaContext } from "../Body/components/RiskArea/RiskAreaContext";
import styles from "./index.module.less";

interface IconWithNumberProps {
  iconStyle: CSSProperties | undefined;
  className: any;
  style: any;
  icon: ReactNode | ReactElement;
  number?: number;
  text: string;
  color: string;
  onClick?: () => void;
}

const IconWithNumber: FC<IconWithNumberProps> = (
  props: IconWithNumberProps
) => {
  // const context = useContext(RiskAreaContext);
  return (
    <div
      className={`${styles["icon-with-number"]} ${props?.className}`}
      onClick={props.onClick}
      // style={{ cursor: context.showPointer ? "pointer" : "default" }}
    >
      <div className={styles["left-comp"]} style={props?.iconStyle}>
        {props.icon}
      </div>
      <div className={styles["right-comp"]} style={{ color: props.color }}>
        <Tooltip placement="top" title={props.number}>
          <div className={styles["icon-with-number-top"]}>
            {props.number || 0}
          </div>
        </Tooltip>
        <Tooltip placement="top" title={props.text}>
          <div className={styles["icon-with-number-bottom"]}>{props.text}</div>
        </Tooltip>
      </div>
    </div>
  );
};

export default IconWithNumber;
